<template>
    <div ref="split-cont" clss="split-cont">
        <!--<div class="ui scrollbar scroll-no-track content flex">
            <slot></slot>
        </div>-->
        <slot></slot>
    </div>
</template>
<script>
    export default {
        name: 'ui-split-cont',
        props: {
            left: String
        },
        data() {
            return {
                width: '300'
            }
        },
        mounted() {
            const el = this.$refs['split-cont'];
            // console.dir(el)
            this.$nextTick(() => {
                if (el && el.nextSibling) {
                    el.className = 'ui item flex'
                    if (this.left) {
                        this.width = this.left;
                        el.style.width = this.left + 'px';
                    }else{
                        el.style.width = this.width + 'px';
                    }
                }else{
                    this.width = null
                    el.className = 'ui item flex one'
                }
                el.childNodes[0].className = 'ui flex item one'
            })
        }
    }
</script>


